import { View, Image, Text } from '@tarojs/components';
import Taro from '@tarojs/taro';
import { AtButton } from 'taro-ui';
import './index.scss';

interface IProps {
  service: any;
  onSelect: (e: any) => void;
  skuCount?: number;
  serviceType: 'daodian' | 'shangmen';
}

export default function ({ service, onSelect, serviceType }: IProps) {
  const toDetailPage = () => {
    Taro.navigateTo({
      url: `/pages/appointment/detail/index?id=${service.id}&serviceType=${serviceType}`,
    });
  };
  return (
    <View className="service-sku-item">
      <View className="goods-info">
        <View className="goods-image" onClick={toDetailPage}>
          <Image mode="aspectFit" src={service.pic_url} />
        </View>
        <View className="goods-right">
          <View className="goods-name" onClick={toDetailPage}>
            {service.goods_name}
          </View>
          <View className="goods-intro" onClick={toDetailPage}>
            {service.brief}
          </View>
          <View className="goods-keywords">
            {Array.isArray(service.keywords)
              ? service.keywords.map((item, key) => {
                  return (
                    <View key={key} className="goods-sku" onClick={toDetailPage}>
                      {item}
                    </View>
                  );
                })
              : null}
          </View>
          <View className="goods-bottom">
            <View className="goods-price" onClick={toDetailPage}>
              <Text>￥</Text>
              {service.min_price}
            </View>
            <View className="sku-btn">
              <AtButton size="small" type="primary" onClick={() => onSelect(service)}>
                预约
              </AtButton>
            </View>
          </View>
        </View>
      </View>
    </View>
  );
}
